/**
 *  学习目标： 表单处理
 *    注意：React 没有指令，表单元素需要通过维护 state，并根据用户输入进行更新。
 *
 *    受控组件官方原话：渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
 *    PS：
 *      1. React 的受控组件 相当于 Vue 的 v-model 双向绑定
 *      2. React 对表单元素的 onChange 事件进行过封装，统一使用 onChange 获取表单值即可。
 */

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  state = {
    msg: 'hello',
  }

  handleChange = (e) => {
    // console.log(e.target.value)
    this.setState({ msg: e.target.value })
  }

  render() {
    return (
      <>
        <h1 ref='txtRef'>表单处理</h1>
        <input type='text' value={this.state.msg} onChange={this.handleChange} />
      </>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
